<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>消息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
html,body{ width: 100%; }
/*最外层*/
.page-container{position: relative;  height: 100%;  width: 100%;   overflow: hidden;display: none; }
/*头部搜索*/
.header{  position: absolute; top:0; left: 0; width: 100%;
  padding:9px 13px;     height:50px; width:100%;border-bottom:1px solid #f2f2f2;background: #fff;}
.header input{height: 100%;border:0; font-size:15px; vertical-align: middle; }
.header-inp{  height: 30px;
  padding:0 60px 0 35px; width:100%;background: #f3f4f9 url(../img/ss_03.png) 9px center no-repeat;  border-radius: 5px; color: #969798; background-size:18px;}
.header-btn{   position: absolute; right: 0; top:0;   height: 100%; font-size:15px; line-height: 50px;
  width:60px;  background: #fff; color: #3396fb; text-align:center; font-weight: 600;}
.h-info{display:none; position:absolute; top:50px;right:2px; padding:8px; width:150px;  box-shadow: 1px 1px 8px #c5c5c5,-1px -1px 4px #c5c5c5; background: #fff; z-index: 9; }
.h-info li a{display: block;padding-left:40px; overflow:hidden; width: 100%; height: 36px; line-height: 36px; font-size:15px; color: #000;}
/*内容容器*/

.page-wrap{   padding:50px 0; 
  width: 100%;height: 100%; overflow: hidden; overflow-y: auto; }
/*内容*/
.p-list{position:relative;display:block;padding:13px;width:100%;height:64px;border-bottom:1px solid #f2f2f2;font-size:15px;}
.p-list img{ position:absolute; top:12px;left:12px; width: 40px; height: 40px;}
.p-list h4,.p-list p{position:relative; width:100%;padding:0 50px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.r-label{ position: absolute; top:0; right: 0; }
.p-list p{margin-top: 2px;  height:20px; line-height:15px ; font-size:14px;   color: #a1a1a1;  }
.p-list h4{ height: 20px; line-height:20px; color: #393939;}
.p-list h4 span{margin-top: 1px;padding:0 3px;min-width:16px;height: 16px;line-height: 16px;text-align: center; border-radius: 8px;background:red; color: #fff; font-size: 12px; font-weight: 600;}
/*小图片*/
.hbg_1{ background: url(../img/h_03.png) 8px center no-repeat; background-size:23px;}
.hbg_2{ background: url(../img/h2_07.png) 8px center no-repeat; background-size:23px; }
.hbg_3{ background: url(../img/h3_11.png) 8px center no-repeat; background-size:23px; }
.hbg_4{ background: url(../img/h3_14.png) 8px center no-repeat; background-size:23px; }
/*底部导航*/
.footer{position:absolute;bottom:0;left:0;height: 50px;width:100%;border-top:1px solid #f2f2f2;background: #fff;
     box-shadow: 1px 0px 50px #cfcfcf; }
.footer a{ float: left;padding-top:28px; width:25%;height:100%;text-align: center;font-size: 13px;  color:#949494;}
.footer .dian{ float:right;width: 7px;height: 7px;border-radius: 50%; background:#eb5740;margin-right:30%;margin-top: -22px; }
/*底部导航图标*/
.foot-xiao{ background:url(../img/xin2_03.png) center 7px no-repeat ; background-size:23px 20px; }
.foot-xiao.active{ background-image:url(../img/xin1_03.png); color: #2fa9fe; background-size:23px 20px;  }
.foot-tong{ background:url(../img/t2_03.png) center 7px no-repeat ; background-size:19px 21px;  }
.foot-tong.active{ background-image:url(../img/t1_03.png); color: #2fa9fe; background-size:19px 21px; }
.foot-gn{ background:url(../img/g2_03.png) center 7px no-repeat ; background-size:20px 20px;  }
.foot-gn.active{ background-image:url(../img/g1_03.png); color: #2fa9fe;background-size:20px 20px; }
.foot-wo{ background:url(../img/r2_03.png) center 7px no-repeat ; background-size:17px 22px;}
.foot-wo.active{ background-image:url(../img/r1_03.png); color: #2fa9fe;background-size:17px 22px; }
</style>
</head>
<body>
<div class="page-container" id="page-container">
          <!-- 头部搜索 -->
          <div class="header">
              <input class="header-inp" type="text" placeholder="搜索" id="inp">
              <a href="###" id="head-btn" class="header-btn">发布</a>
              <ul class="h-info">
                    <li><a href="qunliao.html" class="hbg_1">发起群聊</a></li>
                    <li><a href="shengqing.html" class="hbg_2">发起申请</a></li>
                    <li><a href="tongzhi.html" class="hbg_3">发布通知</a></li>
                    <li><a href="deyu.html" class="hbg_4">德育评价</a></li>
              </ul>
          </div>
          <!-- 内容区 -->
      	  <div class="page-wrap" id="page-wrap">

      	  </div>
      </div>

  <!-- 底部导航 -->
  <div class="footer">
    <a class="foot-xiao active" href="../xiaoxi/index.html"><i></i>消息</a>
    <a class="foot-tong" href="../tongxunlu/index.html"><i></i>通讯录</a>
    <a class="foot-gn"  href="../gongneng/index.html"><i></i>功能</a>
    <a class="foot-wo" href="../wode/index.html"><i class="dian"></i>我的</a>
  </div>
</div>
</body>
<script>
$.showLoading();
$(function(){
// 数据渲染 
var infoarr = [
        {src:"../img/1_03.png", href:"../otherpages/qingjiashengqing.html",  name:"请假提醒", text:"李小花同学的请假,李小花同学的请假,李小花同学的请假,", num:4, time:"09:23"},
        {src:"../img/2_06.png", href:"../otherpages/tongzhi.html",   name:"通知公告", text:"国庆节放假通知,放假通知公告是否水电", num:1, time:"09:23"},
        {src:"../img/3_08.png", href:"../tongxunlu/qunliaoye.html",   name:"三年级(1)班家校交流室", text:"李文爸爸: 期末考试什么时候开始:主要考些什么内容", num:2, time:"09:23"},
        {src:"../img/4_12.png", href:"../otherpages/xiaowuban.html",   name:"校务办公通知", text:"三年级奥数比赛时间", num:1, time:"09:23"},
        {src:"../img/5_14.png", href:"../otherpages/caigou.html",   name:"采购通知", text:"五年级最新一批体育器材采购完成", num:1, time:"09:23"},
        {src:"../img/6_16.png", href:"../otherpages/huiyi.html",   name:"会议通知", text:"明天上午9:20四年级班主任小会", num:1, time:"09:23"}
];

// 获取本地储存数据
var data =sessionStorage.data;
var obj = {};
if(!!data){
    var data =$.parseJSON(data);      
    $.each(data, function(i,v){
          obj ={src:"../img/6_16.png", href:v.href+"?"+i,  name:v.title, text:v.text, num:1, time:v.time.split(" ")[1] };
          infoarr.unshift(obj);
    })
};

var strarr = [];
$.each( infoarr, function(i,v){
       if(v.num>99){ v.num = "99+" }
       strarr.push(
              '<a class="p-list " href="'+v.href+'">'+
                         '<div>'+
                           '<h4>'+v.name+'<span class="r-label num">'+v.num+'</span></h4>'+
                           '<p>'+
                                '<span class="list-text">'+v.text+'</span>'+
                                '<span class="r-label">'+v.time+'</span>'+
                          '</p>'+
                          '<img src="'+v.src+'" >'+
                        '</div>'+
               '</a>'
        )
})
$("#page-wrap").html( strarr.join(""));

// 点击事件
$("#head-btn").click(function(){
     if( $(this).parent().find(".h-info").css("display") ==="none" ){
          $(this).parent().find(".h-info").show();
     }else{
          $(this).parent().find(".h-info").hide();
     }
     return false;
})
$(document).click(function(){
    $(".h-info").hide();
})

// 搜索
$("#inp")[0].oninput=function () {
    var value =$.trim( $("#inp").val() );      
    var  strSelect = [];
    if( value){
          $.each(infoarr,function(i,v){
               if( v.name.match(value) ){
                      var str = v.name.replace( value, '<mm style="color:red;">'+value+'</mm>')
                      strSelect.push(
                            '<a class="p-list " href="'+v.href+'">'+
                                   '<div>'+
                                       '<h4>'+str+'<span class="r-label num">'+v.num+'</span></h4>'+
                                       '<p>'+
                                            '<span class="list-text">'+v.text+'</span>'+
                                            '<span class="r-label">'+v.time+'</span>'+
                                      '</p>'+
                                      '<img src="'+v.src+'" >'+
                                   '</div>'+
                            '</a>'
                      );
               }
          })
          $("#page-wrap").html( strSelect.join('') );
     }else{
          $("#page-wrap").html( strarr.join(""));
     }
}

$.hideLoading();
$("#page-container").show(); 
});

</script>
</html>